<template>
  <div class="indent">
    <!-- 提交订单页 -->
    <div class="order">
      <SearchIcon :title="'网易严选'"></SearchIcon>
      <!-- 基本信息 -->
      <div class="uaerName">
        <van-contact-card type="edit" :tel="tel" :name="name" @click="onEdit" />
      </div>
      <!-- 文本框 -->
      <div class="inset">
        <div class="insetItem">
          <text class="insetText">商品合计</text>
        </div>
        <div class="insetItem">
          <text class="insetText">邮费</text>
          <text class="insetPrice">¥8.00</text>
        </div>
        <div class="insetItem">
          <text class="insetText">优惠券</text>
          <text class="insetPrice">¥8.00</text>
        </div>
        <div class="insetItem">
          <text class="insetText">我要开发票</text>
          <text class="insetPrice">¥8.00</text>
        </div>
      </div>

      <!-- 商品详情 -->
      <div class="shopItem">
        <!-- 详细商品 -->
        <van-swipe-cell class="swipeCell" v-for="(goods, index) in cartInfoList" :key="index">
          <van-card :price="goods.skuPrice" :desc="goods.skuName" title="手机详情" class="goods-card" :thumb="goods.imgUrl" />
        </van-swipe-cell>
      </div>
      <!-- 提交订单 -->
      <div>
        <van-submit-bar :price="goodspriceAll" label="应付金额" button-text="提交订单" @submit="onSubmit" />
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'Order'
})
</script>
<script lang="ts" setup>
import { showToast } from 'vant'
import { ref, onMounted } from 'vue'
import { useCartStore } from '@/stores/shopCart'
import { storeToRefs } from 'pinia'

// 订单
const tel = ref('13000000000')
const name = ref('张三')
const onEdit = () => showToast('edit')

// 商品详情
const cartStore = useCartStore()
const { cartInfoList, goodspriceAll } = storeToRefs(cartStore)
function goodsList() {
  cartStore.CartListData()
}

//

onMounted(() => {
  goodsList()
})
// 提交订单
const onSubmit = () => showToast('点击按钮')
</script>

<style lang="less" scoped>
.indent {
  background-color: beige;
  .order {
    .uaerName {
      margin: 10px 0;
    }
    .balance {
      width: 100%;
      height: 52px;
      margin: 10px;
      background-color: white;
      .balanceBox {
        display: flex;
        .balanceMoney {
          font-size: 10px;
          margin: 10px 20px;
          line-height: 32px;
          .balanceChecked {
            line-height: 52px;
          }
          .balanceIcon {
            line-height: 52px;
            margin: 30px 0;
          }
        }
      }
    }
    .inset {
      width: 100%;
      height: 250px;
      .insetItem {
        height: 50px;
        width: 95%;
        float: right;
        border-bottom: 1px solid #000;
        .insetText {
          font-size: 18px;
          line-height: 50px;
        }
        .insetPrice {
          font-size: 14px;
          line-height: 50px;
          float: right;
        }
      }
    }
    .shopItem {
      height: 100%;
      .swipeCell {
        border-bottom: 1px solid azure;
        margin: 10px;
      }
    }
  }
}
</style>
